<template>
    <div style="margin: 20px;">
        <div style="background: #fff; padding: 30px;">
            <a-row>
                <a-col :span="8">
                    <div class="flex-row-center size-14">
                        <div class="color-000-85">套餐名称：</div>
                        <div class="color-000-65">{{data.packageName}}</div>
                    </div>
                </a-col>
                <a-col :span="8">
                    <div class="flex-row-center size-14">
                        <div class="color-000-85">套餐库存：</div>
                        <div class="color-000-65">{{data.packageStock}}</div>
                    </div>
                </a-col>
                <a-col :span="8">
                    <div class="flex-row-center size-14">
                        <div class="color-000-85">套餐金额：</div>
                        <div class="color-000-65">{{data.packageAmount}}</div>
                    </div>
                </a-col>
            </a-row>
            
            
            <a-row class="margin-top-30">
                 <a-col :span="8">
                    <div class="flex-row-center size-14">
                        <div class="color-000-85">套餐内容：</div>
                        <div class="color-000-65">{{packageContent}}</div>
                    </div>
                </a-col>
            </a-row>
            <div class="flex-row size-14 margin-top-30" style="line-height: 24px;">
                <div class="color-000-85" style="min-width: 70px;">套餐描述：</div>
                <div class="color-000-65">{{data.remark}}</div>
            </div>
        </div>

        <div style="background: #fff; padding: 30px;" class="margin-top-30" v-if="images&&images.length>0">
            <div class="color-000-85 size-14" style="min-width: 70px;">图片：</div>
            <viewer :images="images" style="margin-top: 10px">
                <img v-for="src in images" :key="src" :src="src"
                     style="width: 300px; height: 180px; object-fit: contain; margin: 0 15px 15px 0;"
                     :onerror="errorImg">
            </viewer>
        </div>
       
    </div>
</template>
<script>
  export default {
    name: "contractInfo",
    data() {
      return {
        errorImg: 'this.src="' + require('../../image/icon_default.png') + '"',
        packageId: 0,
        data: {id:1,packageName:'套餐1',packageStock:99,packageAmount:99,remark:"测试测试"},
        groupData: [{id:1,groupName:'素菜',list:[{name:"海带丝",productNum:"1"},{name:"腐竹",productNum:"2"}]},{id:1,groupName:'大荤',list:[{name:"猪排",productNum:"1"},{name:"鸭腿",productNum:"2"}]}],
        images: [],
        packageContent:"",
        pdfs: []
      }
    },
    mounted() {
      console.log(123, this.$route);
      this.packageId = this.$route.query.packageId;
      this.getInfo();
      this.getImages();
      //先获取分组餐单
      this.processNestedList(this.groupData);
    },
    computed: {
      getSize() {
        return function (bytes) {
          return this.$util.formatSize(bytes)
        }
      },
    },

    methods: {
      getInfo() {
        let p = {
          packageId: this.packageId
        }
        this.$util.showLoading(this);
        //TODO 调用详情接口
        // this.$util.get('xxx', p, true).then((res) => {
        //   this.$util.hideLoading();
        //   console.log(111, res);
        //   this.data = res.content;
        // })
        this.$util.hideLoading();
      },
      getImages() {
        //获取图片
      },
      // combinedList() {
      //   this.packageContent = this.groupData.map(item => 
      //   let result = `${prefix}${item.name}`
      //   if (item.children) {
      //     result += item.children.map(child => 
      //       this.formatNestedItem(child, `${prefix}  `)
      //     ).join('\n')
      //   }
      //   return result
      // )},
      processNestedList(list) {
        this.packageContent = list.map(parentItem => {
          const childrenStr = parentItem.list
            .map(child => `${child.name} x${child.productNum}`)
            .join(' ')
          return `${parentItem.groupName}：${childrenStr}`
        })},
      
    }
  }
</script>

<style scoped>
    .pdf-bg{
        width: 340px;
        height: 96px;
        border-radius: 2px;
        border: 1px solid #E9E9E9;
    }
</style>
